<template>
    <div id="app">
        <LemonImui width="780px" :isUpdateContactTime="!false" :hideMenu="false" :user="user" ref="IMUI" :contactContextmenu="[{ text: '删除该对话', click: deleteContact }]" @sendKey="sendKey" @pull-messages="handlePullMessages" @messageClick="handleMessageClick" @send="handleSend">
            <template #message-title="scope">
                {{ scope ? scope.displayName : '' }}
                <div style="display: flex; justify-content: space-between">afsdg</div>
            </template>
            <!-- 联系人插槽 -->
            <!-- <template #sidebar-contact="scope"> {{ scope }} </template> -->
            <!-- 	固定在左侧联系人列表的底部 -->
            <!-- <template #sidebar-message-fixedbottom>14324234 </template> -->
            <!-- <template #sidebar-contact-top> 1 </template> -->
            <template #cover>
                <div class="cover">
                    <span><b>X</b>unlu</span>
                </div>
            </template>
        </LemonImui>
    </div>
</template>

<script>
const getTime = () => new Date().getTime()
const generateRandId = () => Math.random().toString(36).substr(-8)

// import Vue from 'vue'
// import LemonIMUI from 'lemon-imui'
// import 'lemon-imui/dist/index.css'

export default {
    name: 'App',
    data() {
        return {
            user: {
                id: '1',
                displayName: 'my',
                avatar: 'https://wishtoday-static.svipc.cn/avatar/286016116555845.png',
            },
        }
    },
    mounted() {
        const { IMUI } = this.$refs
        console.log('IMUI ========>', IMUI)
        // IMUI.initEditorTools() //{ name: 'messages' }, { name: 'contacts' }

        let contacts = []

        for (let index = 0; index < 20; index++) {
            contacts.push({
                id: '2' + index,
                displayName: '铁柱子' + index,
                avatar: 'https://wishtoday-static.svipc.cn/avatar/286016116555845.png',
                type: 'single',
                index: 'T',
                unread: 0,
                lastSendTime: getTime(),
                lastContent: '你好123',
            })
        }
        // IMUI.setLastContentRender('text', (message) => {
        //     return ['12']
        // })

        // IMUI.setLastContentRender('text', (message) => {
        //     return ['最新图片']
        // })

        IMUI.initContacts(contacts)

        setTimeout(() => {
            IMUI.changeContact('2')
        }, 1000)
    },
    created() {
        // console.log('111111111 ========>', this.$refs)
    },
    methods: {
        deleteContact(e, instance, hide) {
            const { IMUI } = this.$refs
            const { id } = instance
            console.log('删除联系人 ========>', id, JSON.parse(JSON.stringify(instance)))

            IMUI.updateContact({
                id: id,
                lastContent: null,
            })
            // TODO
            if (IMUI.currentContactId == id) IMUI.changeContact(null)

            // console.log('删除联系人 ========>', currentContactId, instance)
            hide()
        },
        /**
         * 	点击聊天窗口中的消息时会触发该事件
         */
        handleMessageClick(e, key, message) {
            const { IMUI } = this.$refs
            console.log('点击聊天窗口中的消息 ========>', message)
            if (key == 'status' && message.status === 'failed') {
                IMUI.updateMessage({
                    id: message.id,
                    toContactId: message.toContactId,
                    status: 'going',
                    content: '重新发送消息...',
                })
                // setTimeout(() => {
                //     IMUI.updateMessage({
                //         id: message.id,
                //         toContactId: message.toContactId,
                //         status: 'failed',
                //         content: '还是发送失败',
                //     })
                // }, 1000)
            }
        },

        /**
         * 	当发送新消息时会触发该事件
         */
        handleSend(message, next, file) {
            // console.log(message.content, next, file)
            setTimeout(() => {
                next({
                    status: 'failed',
                })
            }, 1000)
        },
        /**
         * 	当切换聊天对象或者聊天窗口滚动到顶部时会触发该事件，调用next方法结束loading状态，
         *  如果设置了isEnd=true，下次聊天窗口滚动到顶部将不会再触发该事件
         * @param {*} contact
         * @param {*} next
         */
        handlePullMessages(contact, next) {
            const { currentContactId } = this.$refs.IMUI
            const otherUser = {
                id: contact.id,
                avatar: contact.avatar,
                displayName: contact.displayName,
            }
            const message = (content, fromUser = this.user) => {
                return {
                    id: generateRandId(),
                    status: 'succeed',
                    type: 'text',
                    sendTime: getTime(),
                    content,
                    toContactId: currentContactId,
                    fromUser,
                }
            }

            const messages = [message('信不信zzzzzzzzzzzzzzzzz？', otherUser), message('来'), message('别后悔', otherUser)]
            next(messages, true)
        },

        sendKey(e) {
            console.log('e ========>', e)
        },
    },
}
</script>

<style>
body {
    background: #222;
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.lemon-editor__inner {
    border-top: 1px solid #e7e7e7;
    padding-top: 10px;
    box-shadow: 6px -20px 20px rgb(218 218 218 / 16%);
}
.cover {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #ddd;
}
</style>